import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  Select,
  Button,
  Table,
  Input,
  message,
  TreeSelect,
  Form,
  Modal,
  Upload,
  Space,
  Radio,
} from "antd";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  ExclamationCircleFilled,
  UploadOutlined,
} from "@ant-design/icons";
import {
  text_check,
  post_axios,
  online_type,
  key_find_obj,
  avm_type_list,
  status_code_list,
  avm_type_child_list,
  format_time,
  key_find_show_value,
  random_string,
  get_suffix,
  key_find_check_value,
} from "../../utils";
import TypeIconTemp from "../../modules/typeIconTemp/index";
import OnlineIconTemp from "../../modules/onlineIconTemp/index";
import axios from "../../axios/index";
import "./index.scss";

export default function AvmManager(props) {
  const { t } = useTranslation();
  const [tableHeight, setTableHeight] = useState(0);
  const { Option } = Select;
  const { confirm } = Modal;
  const [form] = Form.useForm();
  const { actions, setSpinning } = props;
  let { menu_action, user_power_lang, username, user_grade } = actions;
  user_power_lang = JSON.parse(user_power_lang);

  // 国内国外判断
  const session_company = sessionStorage.getItem("company");
  let localStorage_company = JSON.parse(localStorage.getItem("choose_company"));
  const local_company_object =
    localStorage_company &&
    localStorage_company[username] &&
    localStorage_company[username]
      ? localStorage_company[username]
      : "";
  const mgHidden = Boolean(session_company === "mg");

  const [page, setPage] = useState(1);
  const [rows, setRows] = useState(20);
  const [total, setTotal] = useState(0);
  const [tableList, setTableList] = useState([]);

  const [com_ids_par, setCom_ids_par] = useState([]);
  const [mch_ids_par, setMch_ids_par] = useState([]);
  const [project_ids_par, setProject_ids_par] = useState([]);
  const [online, setOnline] = useState([]);
  const [avmType, setAvmType] = useState([]);
  const [identify, setIdentify] = useState([]);
  const [avm_s, setAvm_s] = useState([]);
  const [avmID_s, setAvmID_s] = useState([]);

  const getData = async (newPage, newRows) => {
    let upMsg = {
      page: newPage ? newPage : page,
      rows: newRows ? newRows : rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      online: online,
      avm_s: avm_s,
      avmID_s: avmID_s,
      avmType: avmType,
      identify: identify,
      com_ids_par: JSON.parse(JSON.stringify(com_ids_par)),
      mch_ids_par: JSON.parse(JSON.stringify(mch_ids_par)),
      project_ids_par: JSON.parse(JSON.stringify(project_ids_par)),
    };
    setSpinning(true);
    let res = await post_axios("avm_manager", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    setTableList(res.data_rows.rows);
    setTotal(res.data_rows.total);
  };
  const columns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("assets.avm_new"),
      dataIndex: "avm",
      align: "center",
    },
    {
      title: t("assets.avmID"),
      dataIndex: "avmID",
      align: "center",
    },
    {
      title: "SN号",
      dataIndex: "avm_external",
      align: "center",
      hidden: mgHidden,
    },
    {
      title: t("assets.avm_type_way"),
      align: "center",
      render: (_, record) => (
        <>
          <span>{text_check(avm_type_list[record.avmType])}</span>
          {record.identify ? (
            <span>
              {key_find_show_value(
                record.identify,
                identify_status_list,
                "key"
              )}
            </span>
          ) : (
            ""
          )}
        </>
      ),
    },
    {
      title: t("market.avm_box_type"),
      align: "center",
      render: (_, record) => <TypeIconTemp avm_msg={record} />,
    },
    {
      title: t("market.network"),
      align: "center",
      render: (_, record) => (
        <OnlineIconTemp
          avm_msg={record}
          local_company_object={local_company_object}
        />
      ),
    },
    {
      title: t("assets.pay_type"),
      align: "center",
      width: 200,
      render: (_, record) => <>{paytype_text(record.pay_type_set)}</>,
    },
    {
      title: t("system_manager.company"),
      align: "center",
      dataIndex: "company",
    },
    {
      title: t("market.project"),
      dataIndex: "project",
      align: "center",
    },
    {
      title: t("market.point"),
      dataIndex: "point",
      align: "center",
    },
    {
      title: t("goods.commodity_warehouse"),
      dataIndex: "bar_lib_name",
      align: "center",
    },
    {
      title: t("market.online_time"),
      dataIndex: "onlineChangeTime",
      align: "center",
    },
  ];

  // 分页器
  const pageOnChange = async (page, pageSize) => {
    setPage(page);
    setRows(pageSize);
    initData(page, pageSize);
  };

  // 用户数据行点击
  const [clickRowKey, setClickRowKey] = useState([]);
  const [clickRow, setClickRow] = useState([]);

  const tableRowClick = (row) => {
    const avm = row.avm;
    const idx = clickRowKey.indexOf(avm);
    if (idx > -1) {
      const clickAvm = clickRowKey.filter((item) => item !== avm);
      setClickRowKey(clickAvm);
      //   setClickRow(clickRow.splice(idx, 1));
    } else {
      setClickRowKey([...clickRowKey, avm]);
      //   setClickRow([...clickRow, row]);
    }
  };

  const search_data = () => {
    setPage(1);
    initData(1);
  };

  const initData = (page, rows) => {
    setClickRowKey([]);
    setClickRow([]);
    getData(page, rows);
  };
  const box_status_list = [
    {
      msg_en: "In Service",
      msg_cn: "营业",
    },
    {
      msg_en: "Out of Service",
      msg_cn: "停业",
    },
  ];

  const identify_status_list = [
    {
      key: "enable",
      msg_en: "Yes",
      msg_cn: "是",
    },
    {
      key: "disable",
      msg_en: "No",
      msg_cn: "否",
    },
  ];
  //表格支付方式
  const paytype_text = (value) => {
    if (value && value !== "") {
      let type_arr = value.split(",");
      let paytype_str = type_arr.map((item) => {
        return text_check(key_find_obj(item, pay_type_list, "flag"));
      });
      return paytype_str.join(",");
    } else {
      return "";
    }
  };

  //修改商品库
  const [change_avms_kind_value, setChange_avms_kind_value] = useState("");
  const [change_avms_kind_show, setChange_avms_kind_show] = useState(false);
  const change_avms_kind = async () => {
    if (clickRowKey.length < 1) {
      message.warning({
        content: t("assets.select_at_least_one_device"),
      });
      return;
    }
    setChange_avms_kind_value("");
    setChange_avms_kind_show(true);
  };
  const change_avms_kind_confirm = async () => {
    confirm({
      title: t("common.info"),
      icon: <ExclamationCircleFilled />,
      content: (
        <div>
          {t("assets.sure_to_change_commodity_warehouse")}:<br />
          <strong>{clickRowKey.join(",")}</strong>
        </div>
      ),
      onOk: async () => {
        let upMsg = {
          avm_s: clickRowKey.join(","),
          bar_lib: change_avms_kind_value,
          company_id: local_company_object.id,
          company: local_company_object.company,
        };
        let res = await post_axios("avm_manager", "m_modify_bar_lib", upMsg);
        if (!res) return;
        message.success({
          content: t("common.change_success"),
        });
        search_data();
        setChange_avms_kind_show(false);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  // 修改基础信息
  const [change_avms_avmID_show, setChange_avms_avmID_show] = useState(false);
  const [change_avmID_number, setChange_avmID_number] = useState("");
  const change_avms_avmID = async () => {
    if (clickRowKey.length !== 1) {
      message.warning({
        content: t("assets.select_one_device"),
      });
      return;
    }
    const avmID = key_find_obj(clickRowKey[0], tableList, "avm")["avmID"];
    setChange_avmID_number(avmID);
    setChange_avms_avmID_show(true);
  };
  const change_avms_avmID_confirm = async () => {
    if (change_avmID_number == "") {
      message.warning({
        content: t("assets.input_box_assets_no"),
      });
      return;
    }
    confirm({
      title: t("common.info"),
      icon: <ExclamationCircleFilled />,
      content: (
        <div>
          {t("assets.sure_to_change_assets_no")}:<br />
          <strong>{clickRowKey.join(",")}</strong>
        </div>
      ),
      onOk: async () => {
        let upMsg = {
          avm: clickRowKey[0],
          avmID: change_avmID_number,
          company_id: local_company_object.id,
          company: local_company_object.company,
        };
        let res = await post_axios("avm_manager", "m_modify_base", upMsg);
        if (!res) return;
        message.success({
          content: t("common.change_success"),
        });
        search_data();
        setChange_avms_avmID_show(false);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  // 修改机器类型
  const [change_avms_type_show, setChange_avms_type_show] = useState(false);
  const [edit_avmType, setEdit_avmType] = useState("");
  const [edit_avmType_child, setEdit_avmType_child] = useState("");
  const [edit_identify, setEdit_identify] = useState("");
  const change_avms_type = () => {
    if (clickRowKey.length < 1) {
      message.warning({
        content: t("assets.select_at_least_one_device"),
      });
      return;
    }
    setEdit_avmType("");
    setEdit_avmType_child("");
    setChange_avms_type_show(true);
  };

  const change_avms_type_confirm = () => {
    if (clickRowKey.length == 0) {
      message.warning({
        content: t("assets.select_a_device"),
      });
      return;
    }
    confirm({
      title: t("common.info"),
      icon: <ExclamationCircleFilled />,
      content: (
        <div>
          {t("assets.sure_to_change_avm")}:<br />
          <strong>{clickRowKey.join(",")}</strong>
        </div>
      ),
      onOk: async () => {
        let upMsg = {
          avm_s: clickRowKey.join(","),
          avm_type: edit_avmType,
          avm_type_child: edit_avmType_child,
          company_id: local_company_object.id,
          company: local_company_object.company,
        };
        edit_avmType == 30 && (upMsg["identify"] = edit_identify);
        let res = await post_axios("avm_manager", "m_modify_avm_type", upMsg);
        if (!res) return;
        message.success({
          content: t("common.change_success"),
        });
        search_data();
        setChange_avms_type_show(false);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  // 修改支付方式
  const [change_avms_pay_type_show, setChange_avms_pay_type_show] =
    useState(false);
  const [change_avms_pay_type_value, setChange_avms_pay_type_value] = useState(
    []
  );
  const change_avms_pay_type = async () => {
    console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
    if (clickRowKey.length < 1) {
      message.warning({
        content: t("assets.select_at_least_one_device"),
      });
      return;
    }
    setChange_avms_pay_type_value([]);
    setChange_avms_pay_type_show(true);
  };

  const change_avms_pay_type_confirm = async () => {
    if (clickRowKey.length == 0) {
      message.warning({
        content: t("assets.select_a_device"),
      });
      return;
    }
    confirm({
      title: t("common.info"),
      icon: <ExclamationCircleFilled />,
      content: (
        <div>
          {t("assets.sure_to_change_pay_type")}:<br />
          <strong>{clickRowKey.join(",")}</strong>
        </div>
      ),
      onOk: async () => {
        let upMsg = {
          avm_s: clickRowKey.join(","),
          pay_type: change_avms_pay_type_value.join(","),
          company_id: local_company_object.id,
          company: local_company_object.company,
        };
        let res = await post_axios("avm_manager", "m_modify_pay_type", upMsg);
        if (!res) return;
        message.success({
          content: t("common.change_success"),
        });
        search_data();
        setChange_avms_pay_type_show(false);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  // 点击货柜
  const [clicked_box_assets_no, setClicked_box_assets_no] = useState("");
  const [clicked_box_obj, setClicked_box_obj] = useState({});
  const box_row_click = (row) => {
    setClicked_box_assets_no(row.box_assets_no);
    setClicked_box_obj(row);
  };

  // 配置货柜
  const [edit_avm_show, setEdit_avm_show] = useState(false);
  const [edit_avm_list, setEdit_avm_list] = useState([]);
  const get_avm_box_list = async () => {
    let upMsg = {
      avm: clickRowKey[0],
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    let res = await post_axios("avm_manager", "m_box_query", upMsg);
    if (!res) return;
    setEdit_avm_list(res.data_rows.rows);
  };

  const set_container_func = async () => {
    if (clickRowKey.length !== 1) {
      message.warning({
        content: t("assets.select_one_device"),
      });
      return;
    }
    await get_avm_box_list();
    const avmID = key_find_obj(clickRowKey[0], tableList, "avm")["avmID"];
    setChange_avmID_number(avmID);
    setClicked_box_assets_no("");
    setClicked_box_obj({});
    setEdit_avm_show(true);
  };

  const box_sort_no_list = [];
  for (let i = 1; i <= 11; i++) {
    if (i !== 10) {
      box_sort_no_list.push({
        text: i < 10 ? "0" + i : "" + i,
        value: i < 10 ? "0" + i : "" + i,
      });
    }
  }

  const edit_box_sort_no_change = (value) => {
    form.setFieldsValue({
      edit_box_assets_no: clickRowKey[0] + "_" + value,
    });
  };

  // 编辑货柜form
  // 编辑货柜
  const [edit_type, setEdit_type] = useState("");
  const [edit_box_show, setEdit_box_show] = useState(false);
  const [edit_box_title, setEdit_box_title] = useState(t("common.add"));
  const edit_box_dialog_show = async (value) => {
    setEdit_type(value);
    if (value == "add") {
      setEdit_box_show(true);
      setEdit_box_title(t("common.add"));
      onReset();
    } else {
      if (clicked_box_assets_no === "") {
        message.warning({
          content: t("assets.select_a_box"),
        });
        return;
      }
      setEdit_box_title(t("common.change"));
      let {
        box_sort_no,
        box_name,
        box_assets_no,
        box_type_id,
        vm_box,
        box_status,
      } = clicked_box_obj;
      form.setFieldsValue({
        edit_box_sort_no: box_sort_no,
        edit_box_name: box_name,
        edit_box_assets_no: box_assets_no,
        edit_box_type_id: box_type_id,
        edit_vm_box: vm_box,
        edit_box_status: box_status,
      });
      setEdit_box_show(true);
    }
  };

  const edit_box_confirm = async (value, action) => {
    let {
      edit_box_sort_no,
      edit_box_name,
      edit_box_assets_no,
      edit_box_type_id,
      edit_vm_box,
      edit_box_status,
    } = value;
    let box_type_arr = avm_box_list.find(
      (item) => item.box_type_id == edit_box_type_id
    );
    if (!box_type_arr) {
      message.warning({
        content: t("assets.box_type_name_error"),
      });
      return;
    }
    let box_type = box_type_arr.box_type;
    let upMsg = {
      box_sort_no: edit_box_sort_no,
      box_name: edit_box_name,
      box_assets_no: edit_box_assets_no,
      box_type_id: edit_box_type_id,
      box_type,
      box_status: edit_box_status,
      avm: clickRowKey[0],
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    let res = await post_axios("avm_manager", action, upMsg);
    if (!res) return;
    setClicked_box_assets_no("");
    setClicked_box_obj({});
    get_avm_box_list();
    setEdit_box_show(false);
  };

  const onFinish = (values) => {
    console.log(values);
    let action = edit_type == "add" ? "m_box_add" : "m_box_modify";
    edit_box_confirm(values, action);
  };
  const onReset = () => {
    form.resetFields();
  };
  // 删除货柜
  const delete_box_click = () => {
    if (clicked_box_assets_no.value === "") {
      message.warning({
        content: t("assets.select_a_box"),
      });
      return;
    }
    confirm({
      title: t("common.info"),
      icon: <ExclamationCircleFilled />,
      content: (
        <div>
          {t("assets.sure_to_delete_box")}:<br />
          <strong>{clicked_box_obj.box_name}</strong>
        </div>
      ),
      onOk: async () => {
        delete_box_func();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  const delete_box_func = async () => {
    let upMsg = {
      box_sort_no: clicked_box_obj.box_sort_no,
      box_name: clicked_box_obj.box_name,
      box_assets_no: clicked_box_obj.box_assets_no,
      box_type_id: clicked_box_obj.box_type_id,
      vm_box: clicked_box_obj.vm_box,
      box_status: clicked_box_obj.box_status,
      avm: clickRowKey[0],
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    let res = await post_axios("avm_manager", "m_box_del", upMsg);
    if (!res) return;
    setClicked_box_assets_no("");
    setClicked_box_obj({});
    get_avm_box_list();
  };
  // 配置货道
  const [edit_road_show, setEdit_road_show] = useState(false);
  const [road_tab_msg, setRoad_tab_msg] = useState("");
  const [tab_show_obj, setTab_show_obj] = useState({});
  const [local_func, setLocal_func] = useState(false);
  const set_road_func = async (item) => {
    if (window.location.href.indexOf("192.168") > -1) {
      setLocal_func(true);
    }
    setEdit_road_show(true);
    setRoad_tab_msg(item.box_type_id);
    road_tab_Click(item);
  };
  //批量启用
  const road_all_open = () => {
    setSpinning(true);
    setTimeout(() => {
      let all_arr = [];
      edit_avm_road_arr.forEach((item, index) => {
        if (item["box_assets_no"] === tab_show_obj.box_assets_no) {
        } else {
          item["box_assets_no"] = tab_show_obj.box_assets_no;
          let upMsg = Object.assign(item, {
            avm: clickRowKey[0],
            company_id: local_company_object.id,
            company: local_company_object.company,
          });
          all_arr.push(
            post_axios("avm_manager", "m_aisle_modify", upMsg, "noLoading")
          );
        }
      });

      Promise.all(all_arr)
        .then((data) => {
          setSpinning(false);
          console.log(data); // data为一个数组  ['请求成功','上传成功']
          get_avm_road_data(tab_show_obj.x_nu, clicked_box_assets_no);
        })
        .catch((err) => {
          setSpinning(false);
          console.log(err);
        });
    }, 0);
  };
  // 全部停用
  const road_all_close = () => {
    setSpinning(true);
    setTimeout(() => {
      let all_arr = [];
      edit_avm_road_arr.forEach((item, index) => {
        if (item["box_assets_no"] === "") {
          // 当前已经是禁用状态，跳过批量设置
        } else {
          item["box_assets_no"] = clicked_box_assets_no;
          let upMsg = Object.assign(item, {
            avm: clickRowKey[0],
            company_id: local_company_object.id,
            company: local_company_object.company,
          });

          all_arr.push(
            post_axios("avm_manager", "m_aisle_del", upMsg, "noLoading")
          );
        }
      });
      Promise.all(all_arr)
        .then((data) => {
          setSpinning(false);
          console.log(data); // data为一个数组  ['请求成功','上传成功']
          get_avm_road_data(tab_show_obj.x_nu, clicked_box_assets_no);
        })
        .catch((err) => {
          setSpinning(false);
          console.log(err);
        });
    }, 0);
  };
  // 推送配置到机器
  const Push_configuration = async () => {
    let upMsg = {
      avm: clickRowKey[0],
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    setSpinning(true);
    let res = await post_axios("avm_status", "m_aisle_push", upMsg);
    setSpinning(false);
    if (!res) return;
    message.success({
      content: t("common.success"),
    });
  };
  const [edit_avm_road_arr, setEdit_avm_road_arr] = useState([]);
  const road_tab_Click = async (item) => {
    console.log(item);
    setEdit_avm_road_arr([]);
    setTab_show_obj(item);
    let { x_nu, y_nu } = item;
    for (let i = 1; i <= y_nu; i++) {
      for (let j = 1; j <= x_nu; j++) {
        setEdit_avm_road_arr([
          ...edit_avm_road_arr,
          {
            x_no: i,
            y_no: j,
            vm_box_no: "",
            vm_aisle_no: "",
            vm_aisle_label: "",
            box_assets_no: "",
            ele_1: "",
            ele_2: "",
          },
        ]);
      }
    }
    get_avm_road_data(x_nu, item);
  };
  const [road_list, setRoad_list] = useState([]);
  const get_avm_road_data = async (x_nu, value) => {
    let upMsg = {
      avm: clickRowKey[0],
      box_assets_no: value.box_assets_no,
      box_type_id: value.box_type_id,
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    let res = await post_axios("avm_manager", "m_aisle_query", upMsg);
    if (!res) return;
    const rows = res.data_rows.rows;
    setRoad_list(rows);
    rows.forEach((item) => {
      let idx = (item.x_no - 1) * x_nu + item.y_no - 1;
      let idx_obj = Object.assign(item, {
        box_assets_no: item.box_assets_no ? item.box_assets_no : "",
        ele_1: item.ele_1 ? item.ele_1 : "",
        ele_2: item.ele_2 ? item.ele_2 : "",
      });
      let newArr = edit_avm_road_arr;
      newArr[idx] = idx_obj;
      setEdit_avm_road_arr(newArr);
    });
  };

  const radio_change = async (val, item) => {
    console.log(val, item);
    const name = val.target.name;
    const value = val.target.value;
    const itemVal = JSON.parse(JSON.stringify(item));
    setSpinning(true);
    if (name === "box_assets_no" && value === "") {
      console.log("删除");
      itemVal[name] = clicked_box_assets_no;
      console.log(itemVal);
      await set_road_config(itemVal, "m_aisle_del");
    } else {
      console.log("其他变动");
      itemVal[name] = value;
      console.log(itemVal);
      await set_road_config(itemVal, "m_aisle_modify");
    }
    setSpinning(false);
  };
  const set_road_config = async (upMsg, action) => {
    upMsg = Object.assign(upMsg, {
      avm: clickRowKey[0],
      company_id: local_company_object.id,
      company: local_company_object.company,
    });
    let res = await post_axios("avm_manager", action, upMsg);
    if (!res) return;
    get_avm_road_data(tab_show_obj.x_nu, clicked_box_assets_no);
  };

  // 添加设备
  const [add_avmType, setAdd_avmType] = useState("");
  const [add_identify, setAdd_identify] = useState("");
  const [add_avmType_child, setAdd_avmType_child] = useState("");
  const [add_avm_s, setAdd_avm_s] = useState("");
  const [add_cloud_avm, setAdd_cloud_avm] = useState("");
  const [add_avms_type_show, setAdd_avms_type_show] = useState(false);
  const add_avm_func = () => {
    setAdd_avm_s("");
    setAdd_avmType_child("");
    setAdd_avmType("");
    setAdd_cloud_avm("");
    setAdd_avms_type_show(true);
  };
  const add_avm_confirm = async () => {
    let upMsg = {
      avm_s: add_avm_s,
      company_id: local_company_object.id,
      company: local_company_object.company,
      avm_type: add_avmType,
    };

    add_avmType == 30 && (upMsg["identify"] = add_identify);

    if (add_avmType === "31") {
      upMsg["avm_type_child"] = add_avmType_child;
      if (add_avmType_child === "1" || add_avmType_child === "2") {
        upMsg["container_code"] = add_cloud_avm;
      }
    }
    let res = await post_axios("avm_manager", "m_add_avm", upMsg);
    if (!res) return;
    message.success({
      content: t("common.add_scuuess"),
    });
    search_data();
    setAdd_avms_type_show(false);
  };
  // 删除设备
  const delete_avm_func = () => {
    if (clickRowKey.length == 0) {
      message.warning({
        content: t("assets.select_a_device"),
      });
      return;
    }
    confirm({
      title: t("common.info"),
      icon: <ExclamationCircleFilled />,
      content: (
        <div>
          {t("assets.sure_to_delete_avm")}:<br />
          <strong>{clickRowKey.join(",")}</strong>
        </div>
      ),
      onOk: async () => {
        let upMsg = {
          avm_s: clickRowKey.join(","),
          company_id: local_company_object.id,
          company: local_company_object.company,
        };
        let res = await post_axios("avm_manager", "m_del_avm", upMsg);
        if (!res) return;
        message.success({
          content: t("common.delete_success"),
        });
        search_data();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  // 导出设备
  const [export_data_show, setExport_data_show] = useState(false);
  const [export_ranks_list, setExport_ranks_list] = useState([]);
  const export_avm = async () => {
    await get_export_ranks_data();
    setExport_data_show(true);
  };
  const get_export_ranks_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      down_type: "avm_info",
    };
    let res = await post_axios("task_export", "m_query", upMsg);
    if (!res) return;
    setExport_ranks_list(res.data_rows.rows);
  };

  const add_export_ranks = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      online: online,
      avm_s: avm_s,
      avmID_s: avmID_s,
      avmType: avmType,
      com_ids_par: JSON.parse(JSON.stringify(com_ids_par)),
      mch_ids_par: JSON.parse(JSON.stringify(mch_ids_par)),
      project_ids_par: JSON.parse(JSON.stringify(project_ids_par)),
    };
    let res = await post_axios("avm_manager", "m_export", upMsg);
    if (!res) return;
    get_export_ranks_data();
  };
  const download_export_data = (item) => {
    window.open(item.export_url);
  };
  const delete_export_data = async (item) => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      id: item.id,
      export_name: item.export_name,
    };
    let res = await post_axios("task_export", "m_del", upMsg);
    if (!res) return;
    message.success({
      content: t("common.delete_success"),
    });
    get_export_ranks_data();
  };

  // 导入
  const [import_data_show, setImport_data_show] = useState(false);
  const [choose_file_show, setChoose_file_show] = useState(false);
  const [import_ranks_list, setImport_ranks_list] = useState([]);
  const import_avm = async () => {
    await get_import_ranks_data();
    setImport_data_show(true);
  };
  const download_template_func = async () => {
    let upMsg = {
      import_type: "avm_info_type",
    };
    let res = await post_axios("task_import", "m_query_template", upMsg);
    if (!res) return;
    window.open(`https://testweb.easytouch.top/${res.data.template_name}`);
  };
  const [fileList, setFileList] = useState([]);
  const upload_change = (data) => {
    console.log(data);
    const { file, fileList } = data;
    if (fileList.length === 0) return;
    const uploadFile = fileList[0];
    const isJPG =
      uploadFile.originFileObj.type === "application/vnd.ms-excel" ||
      uploadFile.originFileObj.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    const isLt10M = uploadFile.originFileObj.size / 1024 / 1024 <= 10;
    if (!isJPG) {
      message.warning({
        content: t("assets.only_excel"),
      });
      return false;
    } else if (!isLt10M) {
      message.warning({
        content: t("assets.only_500k"),
      });

      return false;
    } else {
      setFileList([uploadFile.originFileObj]);
      console.log(fileList);
    }
  };
  const picUpload = (file) => {
    let fileObj = file;
    let data = oss_params;
    let ossData = new FormData();
    ossData.append("name", fileObj.name);
    //key就代表文件层级和阿里云上的文件名
    let filename = fileObj.name;
    let picName = random_string(32) + get_suffix(filename);
    let keyValue = data.dir + picName;
    ossData.append("key", keyValue);
    ossData.append("policy", data.policy);
    ossData.append("OSSAccessKeyId", data.access_id);
    ossData.append("success_action_status", "200");
    ossData.append("signature", data.signature);
    ossData.append("file", fileObj.raw);

    return new Promise((resolve, reject) => {
      axios
        .post(`https://${data.host}`, ossData, {
          header: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          if (res.status == 200) {
            resolve(picName);
          } else {
            reject(false);
          }
        })
        .catch((error) => {
          reject(false);
        });
    });
  };
  const upload_import_file_confirm = async () => {
    if (Object.keys(fileList).length == 0) {
      message.warning({
        content: t("goods.choose_pic"),
      });
      return;
    }
    let upload_res = await picUpload(fileList[0]);
    let upMsg = {
      import_type: "avm_info_type",
      import_file_name: upload_res,
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    setSpinning(true)
    let res = await post_axios("avm_manager", "m_import", upMsg);
    setSpinning(false)
    if (!res) return;
    setChoose_file_show(false);
    get_import_ranks_data();
  };
  const get_import_ranks_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      import_type: "avm_info_type",
    };
    setSpinning(true);
    let res = await post_axios("task_import", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    setImport_ranks_list(res.data_rows.rows);
  };

  const add_import_ranks = async () => {
    await get_oss_params();
    setFileList([]);
    setChoose_file_show(true);
  };
  const download_import_data = (item) => {
    window.open(item.result_url);
  };
  const delete_import_data = async (item) => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      id: item.id,
      import_file_name: item.import_file_name,
    };
    setSpinning(true)
    let res = await post_axios("task_import", "m_del", upMsg);
    setSpinning(false)
    if (!res) return;
    message.success({
      content: t("common.delete_success"),
    });
    get_import_ranks_data();
  };

  // 获取组织列表
  const [com_list, setCom_list] = useState([]);
  const get_com_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_com_id",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setCom_list(res.data_rows.rows);
  };

  // 筛选_获取商户列表
  const [mch_page, setMch_page] = useState(1);
  const [mch_list, setMch_list] = useState([]);
  const get_mch_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : mch_page,
      rows: 20,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_mch",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    const receiveRows = res.data_rows.rows;
    setMch_list([...mch_list, ...receiveRows]);
  };
  // 商户筛选框-分页
  const mch_next_page = () => {
    setMch_page(mch_page + 1);
    get_mch_data(mch_page + 1);
  };

  // 筛选_获取项目列表
  const [project_page, setProject_page] = useState(1);
  const [project_list, setProject_list] = useState([]);
  const get_project_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : project_page,
      rows: 20,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_project",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setProject_list(res.data_rows.rows);
  };
  // 项目筛选框-分页
  const project_next_page = () => {
    setProject_page(project_page + 1);
    setProject_ids_par([]);
    get_project_data(project_page + 1);
  };

  // 获取分库
  const [goods_kind_list, setGoods_kind_list] = useState([]);
  const get_goods_kind = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_goods_kind",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setGoods_kind_list(res.data_rows.rows);
  };
  // 获取货柜列表
  const [avm_box_list, setAvm_box_list] = useState([]);
  const get_avm_box_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    let res = await post_axios("avm_box_type", "m_query", upMsg);
    if (!res) return;
    setAvm_box_list(res.data_rows.rows);
  };

  const [pay_type_list, setPay_type_list] = useState([]);
  const get_pay_type = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_pay_type",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    let rows = res.data_rows.rows.filter((item) => {
      return item.flag.substring(0, 1) !== "9";
    });
    setPay_type_list(rows);
  };

  const [oss_params, setOss_params] = useState({});
  const get_oss_params = async () => {
    let upMsg = {
      op_type: "IMPORT",
    };
    let res = await post_axios("generate_post_policy", "m_query", upMsg);
    if (!res) return;
    setOss_params(res.data);
  };

  const boxColumns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("assets.box_sort_no_new"),
      dataIndex: "box_sort_no",
      align: "center",
    },
    {
      title: t("assets.box_name"),
      dataIndex: "box_name",
      align: "center",
    },
    {
      title: t("assets.box_assets_no_new"),
      dataIndex: "box_assets_no",
      align: "center",
      hidden: mgHidden,
    },
    {
      title: t("assets.box_type_name"),
      dataIndex: "box_type_name",
      align: "center",
      hidden: mgHidden,
    },
    {
      title: t("common.status"),
      align: "center",
      render: (_, record) => (
        <>
          <span>
            {key_find_check_value(record.box_status, box_status_list, "msg_en")}
          </span>
        </>
      ),
    },
    {
      title: t("assets.action"),
      align: "center",
      render: (_, record) => (
        <Button
          type="primary"
          onClick={() => set_road_func(record)}
          size="small"
        >
          {t("assets.container_configuration")}
        </Button>
      ),
    },
  ];

  const exportRanksColumns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("operate.time"),
      align: "center",
      render: (_, record) => (
        <>{record.op_time ? format_time(record.op_time, "type_s") : ""}</>
      ),
    },
    {
      title: t("transaction_flow.file_name"),
      align: "center",
      width: 300,
      dataIndex: "export_name",
    },
    {
      title: t("transaction_flow.status"),
      align: "center",
      render: (_, record) => (
        <>{text_check(status_code_list[record.status_code])}</>
      ),
    },
    {
      title: t("transaction_flow.operation"),
      align: "center",
      render: (_, record) => (
        <>
          <Button
            size="small"
            type="primary"
            style={{
              marginRight: "10px",
            }}
            onClick={() => download_export_data(record)}
            disabled={record.status_code !== "Success"}
          >
            {t("transaction_flow.download")}
          </Button>
          <Button
            size="small"
            type="primary"
            danger
            onClick={() => delete_export_data(record)}
          >
            {t("transaction_flow.delete")}
          </Button>
        </>
      ),
    },
  ];

  const importRanksColumns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("operate.time"),
      align: "center",
      render: (_, record) => (
        <>{record.op_time ? format_time(record.op_time, "type_s") : ""}</>
      ),
    },
    {
      title: t("transaction_flow.file_name"),
      align: "center",
      width: 300,
      dataIndex: "import_file_name",
    },
    {
      title: t("transaction_flow.status"),
      align: "center",
      render: (_, record) => (
        <>{text_check(status_code_list[record.status_code])}</>
      ),
    },
    {
      title: t("transaction_flow.operation"),
      align: "center",
      render: (_, record) => (
        <>
          <Button
            size="small"
            type="primary"
            style={{
              marginRight: "10px",
            }}
            onClick={() => download_import_data(record)}
            disabled={record.status_code !== "Success"}
          >
            {t("transaction_flow.download")}
          </Button>
          <Button
            size="small"
            type="primary"
            danger
            onClick={() => delete_import_data(record)}
          >
            {t("transaction_flow.delete")}
          </Button>
        </>
      ),
    },
  ];

  useEffect(() => {
    // 挂载后或者更新后的操作
    getData().then(() => {
      const tabBoxHeight =
        document.getElementsByClassName("config_manager")[0].scrollHeight;
      const tableHeight = tabBoxHeight - 96 - 110;
      setTableHeight(tableHeight);
    });
    if (user_grade < 70) {
      get_com_data();
    }
    if (user_grade !== 80) {
      get_mch_data();
    }
    get_project_data();
    get_goods_kind();
    get_avm_box_data();
    get_pay_type();
  }, []);
  return (
    <>
      <div className="config_manager modules">
        <div className="screen_ipt">
          {/* 组织 */}
          {user_grade < 70 ? (
            <div className="ipt_box ipt_box_long">
              <div className="ipt_box_title">{t("market.organization")}</div>
              <TreeSelect
                value={com_ids_par}
                treeData={com_list}
                allowClear={true}
                size="small"
                multiple
                treeCheckStrictly={true}
                fieldNames={{
                  label: "com",
                  value: "com_id",
                  children: "children",
                }}
                placeholder=" "
                treeCheckable={true}
                onChange={(newValue) => setCom_ids_par(newValue)}
              />
            </div>
          ) : (
            ""
          )}
          {/* 商户 */}
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.mch")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={mch_ids_par}
              options={mch_list}
              fieldNames={{
                label: "mch",
                value: "mch_id",
              }}
              onChange={(value) => setMch_ids_par(value)}
              onPopupScroll={(event) => {
                if (mch_list.length < mch_page * 20) {
                  console.log("没有更多商户的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  mch_next_page();
                }
              }}
              optionFilterProp="mch"
            ></Select>
          </div>
          {/* 项目 */}
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.project")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={project_ids_par}
              options={project_list}
              fieldNames={{
                label: "project",
                value: "project_id",
              }}
              onChange={(value) => setProject_ids_par(value)}
              onPopupScroll={(event) => {
                if (project_list.length < project_page * 20) {
                  console.log("没有更多项目的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  project_next_page();
                }
              }}
              optionFilterProp="project"
            ></Select>
          </div>

          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("assets.avm_new")}</div>
            <Input
              placeholder=" "
              value={avm_s}
              size="small"
              allowClear={true}
              onChange={(e) => setAvm_s(e.target.value)}
            />
          </div>
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("assets.avmID")}</div>
            <Input
              placeholder=" "
              value={avmID_s}
              size="small"
              allowClear={true}
              onChange={(e) => setAvmID_s(e.target.value)}
            />
          </div>
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("assets.network")}</div>
            <Select
              size="small"
              placeholder=" "
              allowClear={true}
              value={online}
              onChange={(value) => setOnline(value)}
            >
              {Object.keys(online_type).map((key) => {
                return (
                  <Option
                    value={online_type[key]["value"]}
                    key={online_type[key]["value"]}
                  >
                    {text_check(online_type[key])}
                  </Option>
                );
              })}
            </Select>
          </div>

          {session_company !== "mg" ? (
            <>
              <div className="ipt_box ipt_box_long">
                <div className="ipt_box_title">{t("assets.avm_type")}</div>
                <Select
                  size="small"
                  placeholder=" "
                  allowClear={true}
                  value={avmType}
                  onChange={(value) => setAvmType(value)}
                >
                  {Object.keys(avm_type_list).map((key) => {
                    return (
                      <Option value={key} key={key}>
                        {text_check(avm_type_list[key])}
                      </Option>
                    );
                  })}
                </Select>
              </div>
              <div className="ipt_box ipt_box_long">
                <div className="ipt_box_title">
                  {t("assets.Secondary_identification")}
                </div>
                <Select
                  size="small"
                  placeholder=" "
                  allowClear={true}
                  value={identify}
                  onChange={(value) => setIdentify(value)}
                >
                  {identify_status_list.map((item) => {
                    return (
                      <Option key={item.key} value={item.key}>
                        {text_check(item)}
                      </Option>
                    );
                  })}
                </Select>
              </div>
            </>
          ) : (
            ""
          )}
        </div>
        <div className="screen_btn">
          <div className="btn_box">
            {/* 添加设备 */}
            {menu_action.indexOf("m_add_avm") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<PlusOutlined style={{ color: "#1677FF" }} />}
                onClick={add_avm_func}
              >
                {text_check(user_power_lang["m_add_avm"])}
              </Button>
            ) : (
              ""
            )}
            {/* 修改商品库 */}
            {menu_action.indexOf("m_modify_bar_lib") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<EditOutlined style={{ color: "#1677FF" }} />}
                onClick={change_avms_kind}
              >
                {text_check(user_power_lang["m_modify_bar_lib"])}
              </Button>
            ) : (
              ""
            )}

            {/* 修改机器类型 */}
            {menu_action.indexOf("m_modify_avm_type") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<EditOutlined style={{ color: "#1677FF" }} />}
                onClick={change_avms_type}
              >
                {text_check(user_power_lang["m_modify_avm_type"])}
              </Button>
            ) : (
              ""
            )}
            {/* 修改支付方式 */}
            {menu_action.indexOf("m_modify_pay_type") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<EditOutlined style={{ color: "#1677FF" }} />}
                onClick={change_avms_pay_type}
              >
                {text_check(user_power_lang["m_modify_pay_type"])}
              </Button>
            ) : (
              ""
            )}

            {/* 修改 */}
            {menu_action.indexOf("m_modify_base") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<EditOutlined style={{ color: "#1677FF" }} />}
                onClick={set_container_func}
              >
                {text_check(user_power_lang["m_modify_base"])}
              </Button>
            ) : (
              ""
            )}
            {/* 导入 */}
            {menu_action.indexOf("m_import") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<PlusOutlined style={{ color: "#1677FF" }} />}
                onClick={import_avm}
              >
                {text_check(user_power_lang["m_import"])}
              </Button>
            ) : (
              ""
            )}
            {/* 导出 */}
            {menu_action.indexOf("m_export") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<PlusOutlined style={{ color: "#1677FF" }} />}
                onClick={export_avm}
              >
                {text_check(user_power_lang["m_export"])}
              </Button>
            ) : (
              ""
            )}

            {/* 删除设备 */}
            {menu_action.indexOf("m_del_avm") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<DeleteOutlined style={{ color: "#1677FF" }} />}
                onClick={delete_avm_func}
              >
                {text_check(user_power_lang["m_del_avm"])}
              </Button>
            ) : (
              ""
            )}
            {/* 查询 */}
            {menu_action.indexOf("m_query") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<SearchOutlined style={{ color: "#1677FF" }} />}
                onClick={search_data}
              >
                {text_check(user_power_lang["m_query"])}
              </Button>
            ) : (
              ""
            )}
          </div>
        </div>
        <div className="table_box">
          <div
            className="page-table"
            style={{
              width: "100vw",
            }}
          >
            <Table
              dataSource={tableList}
              size="small"
              bordered
              columns={columns}
              rowKey="avm"
              virtual
              scroll={{
                y: tableHeight,
              }}
              onRow={(record) => {
                return {
                  onClick: () => tableRowClick(record), // 点击行
                };
              }}
              rowClassName={(record, index) => {
                if (clickRowKey.indexOf(record.avm) > -1) {
                  return "row_clicked_style";
                }
              }}
              rowHoverable={false}
              pagination={{
                defaultCurrent: page,
                defaultPageSize: rows,
                size: "small",
                current: page,
                total: total,
                responsive: true,
                showTotal: (total) =>
                  text_check({
                    msg_cn: `共 ${total} 条`,
                    msg_en: `Total ${total} items`,
                  }),
                onChange: pageOnChange,
              }}
            />
          </div>
        </div>
      </div>
      {/* 添加设备 */}
      <Modal
        title={text_check(user_power_lang["m_add_avm"])}
        open={add_avms_type_show}
        onOk={add_avm_confirm}
        onCancel={() => setAdd_avms_type_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.avm")}</div>
          <Input
            placeholder=" "
            allowClear={false}
            value={add_avm_s}
            onChange={(e) => setAdd_avm_s(e.target.value)}
          />
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.avm_type")}</div>
          <Select
            placeholder=" "
            allowClear={true}
            value={add_avmType}
            onChange={(value) => setAdd_avmType(value)}
          >
            {Object.keys(avm_type_list).map((key) => {
              return (
                <Option value={key} key={key}>
                  {text_check(avm_type_list[key])}
                </Option>
              );
            })}
          </Select>
        </div>
        {add_avmType === "30" ? (
          <div className="dialog_ipt_box">
            <div className="ipt_box_title">
              {t("assets.Secondary_identification")}
            </div>
            <Select
              placeholder=" "
              allowClear={true}
              value={add_identify}
              onChange={(value) => setAdd_identify(value)}
            >
              {identify_status_list.map((item) => {
                return (
                  <Option value={item.key} key={item.key}>
                    {text_check(item)}
                  </Option>
                );
              })}
            </Select>
          </div>
        ) : (
          ""
        )}
        {add_avmType === "31" ? (
          <>
            <div className="dialog_ipt_box">
              <div className="ipt_box_title">套件类型</div>
              <Select
                placeholder=" "
                allowClear={true}
                value={add_avmType_child}
                onChange={(value) => setAdd_avmType_child(value)}
              >
                {Object.keys(avm_type_child_list).map((key) => {
                  return (
                    <Option value={key} key={key}>
                      {text_check(avm_type_child_list[key])}
                    </Option>
                  );
                })}
              </Select>
            </div>
            {add_avmType_child === "1" || add_avmType_child === "2" ? (
              <div className="dialog_ipt_box">
                <div className="ipt_box_title">云从设备号</div>
                <Input
                  placeholder=" "
                  allowClear={false}
                  value={add_cloud_avm}
                  onChange={(e) => setAdd_cloud_avm(e.target.value)}
                />
              </div>
            ) : (
              ""
            )}
          </>
        ) : (
          ""
        )}
      </Modal>
      {/* 修改商品库 */}
      <Modal
        title={t("assets.change_commodity_warehouse")}
        open={change_avms_kind_show}
        onOk={change_avms_kind_confirm}
        onCancel={() => setChange_avms_kind_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.avm_new")}</div>
          <div className="change_avms_style">{clickRowKey.join(",")}</div>
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.sub_treasury")}</div>
          <Select
            placeholder=" "
            allowClear={false}
            options={goods_kind_list}
            fieldNames={{
              label: "name",
              value: "kind",
            }}
            value={change_avms_kind_value}
            onChange={(value) => setChange_avms_kind_value(value)}
          />
        </div>
      </Modal>
      {/* 修改基础信息 */}
      <Modal
        title={t("assets.change_basic_info")}
        open={change_avms_avmID_show}
        onOk={change_avms_avmID_confirm}
        onCancel={() => setChange_avms_avmID_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.avm_new")}</div>
          <div className="change_avms_style">{clickRowKey.join(",")}</div>
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.avmID")}</div>
          <Input
            placeholder=" "
            allowClear={false}
            value={change_avmID_number}
            onChange={(e) => setChange_avmID_number(e.target.value)}
          />
        </div>
      </Modal>

      {/* 修改机器类型 */}
      <Modal
        title={t("assets.change_basic_info")}
        open={change_avms_type_show}
        onOk={change_avms_type_confirm}
        onCancel={() => setChange_avms_type_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.avm_new")}</div>
          <div className="change_avms_style">{clickRowKey.join(",")}</div>
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.avm_type")}</div>
          <Select
            placeholder=" "
            allowClear={true}
            value={edit_avmType}
            onChange={(value) => setEdit_avmType(value)}
          >
            {Object.keys(avm_type_list).map((key) => {
              return (
                <Option value={key} key={key}>
                  {text_check(avm_type_list[key])}
                </Option>
              );
            })}
          </Select>
        </div>
        {edit_avmType === "30" ? (
          <div className="dialog_ipt_box">
            <div className="ipt_box_title">
              {t("assets.Secondary_identification")}
            </div>
            <Select
              placeholder=" "
              allowClear={true}
              value={edit_identify}
              onChange={(value) => setEdit_identify(value)}
            >
              {identify_status_list.map((item) => {
                return (
                  <Option value={item.key} key={item.key}>
                    {text_check(item)}
                  </Option>
                );
              })}
            </Select>
          </div>
        ) : (
          ""
        )}
        {edit_avmType === "31" ? (
          <>
            <div className="dialog_ipt_box">
              <div className="ipt_box_title">套件类型</div>
              <Select
                placeholder=" "
                allowClear={true}
                value={edit_avmType_child}
                onChange={(value) => setEdit_avmType_child(value)}
              >
                {Object.keys(avm_type_child_list).map((key) => {
                  return (
                    <Option value={key} key={key}>
                      {text_check(avm_type_child_list[key])}
                    </Option>
                  );
                })}
              </Select>
            </div>
            {add_avmType_child === "1" || add_avmType_child === "2" ? (
              <div className="dialog_ipt_box">
                <div className="ipt_box_title">云从设备号</div>
                <Input
                  placeholder=" "
                  allowClear={false}
                  value={add_cloud_avm}
                  onChange={(e) => setAdd_cloud_avm(e.target.value)}
                />
              </div>
            ) : (
              ""
            )}
          </>
        ) : (
          ""
        )}
      </Modal>

      {/* 修改支付方式 */}
      <Modal
        title={t("assets.change_pay_type")}
        open={change_avms_pay_type_show}
        onOk={change_avms_pay_type_confirm}
        onCancel={() => setChange_avms_pay_type_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.avm_new")}</div>
          <div className="change_avms_style">{clickRowKey.join(",")}</div>
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.pay_type")}</div>
          <Select
            mode="multiple"
            placeholder=" "
            allowClear={false}
            value={change_avms_pay_type_value}
            onChange={(value) => setChange_avms_pay_type_value(value)}
          >
            {pay_type_list.map((item) => {
              return (
                <Option value={item.flag} key={item.flag}>
                  {text_check(item)}
                </Option>
              );
            })}
          </Select>
        </div>
      </Modal>

      {/* 货柜详情 */}
      <Modal
        title={t("assets.container_details")}
        open={edit_avm_show}
        onCancel={() => setEdit_avm_show(false)}
        classNames={{ body: "edit_dialog_body", wrapper: "edit_900_style" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div
          className="avm_msg_box"
          style={{
            width: "100%",
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
          }}
        >
          <div className="dialog_ipt_box short_title">
            <div className="ipt_box_title">{t("assets.machine_")}</div>
            <div className="change_avms_style">{clickRowKey.join(",")}</div>
          </div>
          <div className="dialog_ipt_box short_title">
            <div className="ipt_box_title">{t("assets.avmID")}</div>
            <Input
              placeholder=" "
              allowClear={false}
              value={change_avmID_number}
              onChange={(e) => setChange_avmID_number(e.target.value)}
            />
          </div>
          <div className="avm_btn_line">
            <Button type="primary" onClick={change_avms_avmID_confirm}>
              {t("common.confirm")}
            </Button>
          </div>
        </div>

        <div className="dialog_btn_box">
          {/* 添加 */}
          {menu_action.indexOf("m_box_add") > -1 ? (
            <Button
              size="small"
              type="text"
              icon={<PlusOutlined style={{ color: "#1677FF" }} />}
              onClick={() => edit_box_dialog_show("add")}
            >
              {text_check(user_power_lang["m_box_add"])}
            </Button>
          ) : (
            ""
          )}
          {/* 修改 */}
          {menu_action.indexOf("m_box_modify") > -1 ? (
            <Button
              size="small"
              type="text"
              icon={<EditOutlined style={{ color: "#1677FF" }} />}
              onClick={() => edit_box_dialog_show("change")}
            >
              {text_check(user_power_lang["m_box_modify"])}
            </Button>
          ) : (
            ""
          )}
          {/* 删除 */}
          {menu_action.indexOf("m_box_del") > -1 ? (
            <Button
              size="small"
              type="text"
              onClick={delete_box_click}
              icon={<DeleteOutlined style={{ color: "#1677FF" }} />}
            >
              {text_check(user_power_lang["m_box_del"])}
            </Button>
          ) : (
            ""
          )}
        </div>
        <div
          className="noPage-table"
          style={{
            height: "300px",
          }}
        >
          <Table
            dataSource={edit_avm_list}
            size="small"
            bordered
            columns={boxColumns}
            rowKey="box_assets_no"
            virtual
            scroll={{
              y: tableHeight,
            }}
            onRow={(record) => {
              return {
                onClick: () => box_row_click(record), // 点击行
              };
            }}
            rowClassName={(record, index) => {
              if (clicked_box_assets_no === record.box_assets_no) {
                return "row_clicked_style";
              }
            }}
            rowHoverable={false}
            pagination={false}
          />
        </div>
      </Modal>

      {/* 添加/修改货柜  */}
      <Modal
        title={edit_box_title}
        open={edit_box_show}
        onCancel={() => setEdit_box_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Form
          form={form}
          variant="filled"
          className="edit_user_ruleForm"
          labelCol={{ span: 8, offset: 0 }}
          onFinish={onFinish}
          initialValues={{ enable_verify: "enable" }}
        >
          <div className="form_ipt_box">
            <Form.Item
              label={t("assets.box_sort_no_new")}
              name="edit_box_sort_no"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select placeholder=" " onChange={edit_box_sort_no_change}>
                {box_sort_no_list.map((item) => {
                  return (
                    <Option value={item.value} key={item.value}>
                      {item.text}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>
          <div className="form_ipt_box">
            <Form.Item
              label={t("assets.box_name")}
              name="edit_box_name"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
          </div>
          <div className="form_ipt_box">
            <Form.Item
              label={t("assets.box_assets_no_new")}
              name="edit_box_assets_no"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
          </div>
          <div className="form_ipt_box">
            <Form.Item
              label={t("assets.box_type_name")}
              name="edit_box_type_id"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select placeholder=" ">
                {avm_box_list.map((item) => {
                  return (
                    <Option value={item.box_type_id} key={item.box_type_id}>
                      {item.box_type_name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div className="form_ipt_box">
            <Form.Item
              label={t("common.status")}
              name="edit_box_status"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select placeholder=" ">
                {box_status_list.map((item) => {
                  return (
                    <Option value={item.msg_en} key={item.msg_en}>
                      {text_check(item)}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>
          <div className="form_ipt_btn">
            <Form.Item
              wrapperCol={{
                offset: 16,
                span: 16,
              }}
            >
              <Space>
                <Button
                  htmlType="button"
                  onClick={() => setChange_avms_kind_show(false)}
                >
                  {t("common.cancel")}
                </Button>
                <Button type="primary" htmlType="submit">
                  {t("common.confirm")}
                </Button>
              </Space>
            </Form.Item>
          </div>
        </Form>
      </Modal>

      {/* 货到配置 */}
      <Modal
        title={edit_box_title}
        open={edit_road_show}
        onCancel={() => setEdit_road_show(false)}
        classNames={{ body: "edit_dialog_body config_manager_dialog", wrapper: "noFooterFullscreen" }}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <div style={{ width: "100%", padding: "20px 0", textAlign: "center" }}>
          {local_func ? (
            <>
              {" "}
              <Button onClick={road_all_open}>全部启用</Button>
              <Button onClick={road_all_close}>全部停用</Button>
            </>
          ) : (
            ""
          )}
          <Button onClick={Push_configuration}>
            {t("assets.Save_Config")}
          </Button>
        </div>
        <div
          style={{
            width: tab_show_obj.x_nu * 140 + 10 + "px",
            height: tableHeight + 50 + "px",
            overflow: "auto",
          }}
        >
          <div className="edit_road_content">
            {edit_avm_road_arr.map((item, index) => {
              return (
                <div
                  key={index}
                  className={
                    item.vm_box_no !== "" &&
                    item.vm_aisle_no !== "" &&
                    item.vm_aisle_label !== ""
                      ? "ipt_success_style edit_road_box"
                      : "ipt_success_style"
                  }
                >
                  <div className="ipt_box_xytitle">
                    <span>
                      x:{item.x_no},y:{item.y_no}
                    </span>
                    <span>
                      {item.vm_box_no}/{item.vm_aisle_no}/{item.vm_aisle_label}
                    </span>
                  </div>
                  {item.vm_box_no !== "" &&
                  item.vm_aisle_no !== "" &&
                  item.vm_aisle_label !== "" ? (
                    <>
                      <div className="edit_road_ipt">
                        <Radio.Group
                          name="box_assets_no"
                          value={item.box_assets_no}
                          onChange={(value) => radio_change(value, item)}
                        >
                          <Radio.Button value={tab_show_obj.box_assets_no}>
                            {t("assets.enable")}
                          </Radio.Button>
                          <Radio.Button value="">
                            {t("assets.disable")}
                          </Radio.Button>
                        </Radio.Group>
                      </div>
                      <div className="edit_road_ipt">
                        <Radio.Group
                          name="ele_1"
                          value={item.ele_1}
                          onChange={(value) => radio_change(value, item)}
                          disabled={item.box_assets_no == ""}
                        >
                          <Radio.Button value="2">
                            {t("assets.dual")}
                          </Radio.Button>
                          <Radio.Button value="">
                            {t("assets.single")}
                          </Radio.Button>
                        </Radio.Group>
                      </div>
                      <div className="edit_road_ipt">
                        <Radio.Group
                          name="ele_2"
                          value={item.ele_2}
                          onChange={(value) => radio_change(value, item)}
                          disabled={item.box_assets_no == ""}
                        >
                          <Radio.Button value="1">
                            {t("assets.belt")}
                          </Radio.Button>
                          <Radio.Button value="">
                            {t("assets.spiral")}
                          </Radio.Button>
                        </Radio.Group>
                      </div>
                    </>
                  ) : (
                    <>
                      <div className="edit_road_ipt"></div>
                      <div className="edit_road_ipt"></div>
                      <div className="edit_road_ipt"></div>
                      <div className="edit_road_ipt"></div>
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </Modal>
      {/* 导出 */}
      <Modal
        title={t("transaction_flow.export")}
        open={export_data_show}
        onOk={false}
        onCancel={() => setExport_data_show(false)}
        classNames={{ body: "edit_dialog_body", wrapper: "edit_900_style" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="export_btn">
          <div className="btn_box">
            {/* 添加 */}
            <Button
              size="small"
              type="text"
              icon={<PlusOutlined style={{ color: "#1677FF" }} />}
              onClick={add_export_ranks}
            >
              {text_check(user_power_lang["m_add"])}
            </Button>
            {/* 查询 */}
            <Button
              size="small"
              type="text"
              icon={<SearchOutlined style={{ color: "#1677FF" }} />}
              onClick={get_export_ranks_data}
            >
              {text_check(user_power_lang["m_query"])}
            </Button>
          </div>
        </div>

        <div className="noPage-table" style={{ height: "300px" }}>
          <Table
            dataSource={export_ranks_list}
            size="small"
            bordered
            columns={exportRanksColumns}
            rowKey="export_name"
            virtual
            scroll={{
              y: 300,
            }}
            rowHoverable={false}
            pagination={false}
          />
        </div>
      </Modal>

      {/* 导入 */}
      <Modal
        title={t("assets.import")}
        open={import_data_show}
        onOk={false}
        onCancel={() => setImport_data_show(false)}
        classNames={{ body: "edit_dialog_body", wrapper: "edit_900_style" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="export_btn">
          <div className="btn_box">
            {/* 添加 */}
            <Button
              size="small"
              type="text"
              icon={<PlusOutlined style={{ color: "#1677FF" }} />}
              onClick={add_import_ranks}
            >
              {text_check(user_power_lang["m_add"])}
            </Button>
            {/* 查询 */}
            <Button
              size="small"
              type="text"
              icon={<SearchOutlined style={{ color: "#1677FF" }} />}
              onClick={get_import_ranks_data}
            >
              {text_check(user_power_lang["m_query"])}
            </Button>
          </div>
        </div>

        <div className="noPage-table" style={{ height: "300px" }}>
          <Table
            dataSource={import_ranks_list}
            size="small"
            bordered
            columns={importRanksColumns}
            rowKey="import_file_name"
            virtual
            scroll={{
              y: 300,
            }}
            rowHoverable={false}
            pagination={false}
          />
        </div>
      </Modal>

      <Modal
        title={t("assets.import")}
        open={choose_file_show}
        onOk={upload_import_file_confirm}
        onCancel={() => setChoose_file_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.download_template")}</div>
          <Button type="primary" onClick={download_template_func}>
            {t("assets.download_template")}
          </Button>
        </div>

        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("assets.choose_file")}</div>
          <Upload
            onChange={upload_change}
            onRemove={(file) => {
              const index = fileList.indexOf(file);
              const newFileList = fileList.slice();
              newFileList.splice(index, 1);
              setFileList(newFileList);
            }}
            beforeUpload={() => false}
            maxCount={1}
            fileList={fileList}
          >
            <Button icon={<UploadOutlined />}>Select File</Button>
          </Upload>
        </div>
      </Modal>
    </>
  );
}
